<template>
  <div class="order_settlement">
    <div class="head">
      <div class="head_title">
        <span class="iconfont icon-fanhuijiantou" @click="setTimeOrders"></span>
        订单结算
      </div>
      <router-link to="/addressbook" tag="div" class="head_address" v-if="address&&address[0]">
        <div class="p_item">
          <span class="name">{{ address[0].name }}</span>
          <span class="call">{{ address[0].tel }}</span>
        </div>
        <div class="p_addr">
          <span class="iconfont icon-shouhuodizhi"></span>
          <span>
            {{ address[0].province }} - {{ address[0].city }} -
            {{ address[0].county }} - {{ address[0].addressDetail }}</span
          >
        </div>
        <div class="iconfont icon-jiantou addre"></div>
      </router-link>
       <router-link to="/addressbook" tag="div" class="head_address" v-if="!address||!address[0]">
        <div class="p_item">
          <span class="name">您还未填写地址！</span>
          <span class="call"></span>
        </div>
  
        <div class="iconfont icon-jiantou addre"></div>
      </router-link>
    </div>
    <div class="page_scroll">
      <div class="shop_title">
        <div class="iconfont icon-shu"></div>
        <span>才华书城</span>
      </div>

      <div class="product">
        <div class="img">
          <img :src="goodsData[0].img[0]" alt="" />
        </div>
        <div class="fl_r">
          <div class="line_2 red">￥{{ goodsData[0].money }}</div>
          <div class="line_2">
            共{{ goodsData[0].num }}件，免运费<em
              class="iconfont icon-jiantou"
            ></em>
          </div>
        </div>
      </div>

      <div class="single_line">
        <span>配送方式</span>
        <span
          >快递运输(送货时间不限)<em class="iconfont icon-jiantou"></em
        ></span>
      </div>

      <div class="single_line">
        <span>包装升级</span>
        <span>请选择<em class="iconfont icon-jiantou"></em></span>
      </div>

      <div class="single_line mt_n">
        <span>支付方式</span>
        <span>请选择<em class="iconfont icon-jiantou"></em></span>
      </div>

      <div class="single_line">
        <span>开具发票</span>
        <span>不开发票<em class="iconfont icon-jiantou"></em></span>
      </div>

      <div class="single_line mt_n">
        <span>礼券/运费券/优惠码</span>
        <span>请选择<em class="iconfont icon-jiantou"></em></span>
      </div>

      <div class="single_line">
        <span>余额<i class="price">￥0.00</i></span>
        <span>不可用</span>
      </div>

      <div class="single_line">
        <span>礼品卡</span>
        <span>无可用<em class="iconfont icon-jiantou"></em></span>
      </div>

      <div class="single_line">
        <span>才华V卡</span>
        <span>无可用<em class="iconfont icon-jiantou"></em></span>
      </div>

      <div class="single_line mt_n price_list">
        <div class="price_All">
          <span>商品金额：</span>
          <span>¥{{ (goodsData[0].money * goodsData[0].num).toFixed(2) }}</span>
        </div>
        <div class="price_All">
          <span>运费：</span>
          <span>¥0.00</span>
        </div>
      </div>
    </div>

    <div class="_float_sub">
      <div class="price_sum">
        实付：<span
          >¥{{ (goodsData[0].money * goodsData[0].num).toFixed(2) }}</span
        >
      </div>
      <div class="sub_btn" @click="orders">支付</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsData: null,
      address: null,
      ordersData: [],
    };
  },
  methods: {
    gteGoodsData() {
      let goodsData = JSON.parse(window.localStorage.getItem("goodsData"));
      // console.log(goodsData);
      this.goodsData = goodsData.filter((item) => item.checked);
    },
    getAddress() {
      if (window.localStorage.getItem("addressDta")) {
         let address = JSON.parse(window.localStorage.getItem("addressDta"));
      // console.log(goodsData);
      this.address = address.filter((item) => item.isDefault);
      }
  
    },
    orders() {
      let nowTime = this.gteNowDate(0);
      let removNowTime = +new Date();

      let goodsData = JSON.parse(window.localStorage.getItem("goodsData"));
      let index = goodsData.findIndex(
        (item) => item.id == this.goodsData[0].id
      );

      let ordersData = goodsData.splice(index, 1);
      let newordersData = {
        ...ordersData[0],
        removTime: removNowTime + 7200000,
        time: nowTime,
        received: false,
        pay: true,
        address: this.address,
      };
      if (JSON.parse(localStorage.getItem("ordersData"))) {
        console.log(JSON.parse(localStorage.getItem("ordersData")));
        this.ordersData = JSON.parse(localStorage.getItem("ordersData"));
      }

      this.ordersData.unshift(newordersData);

      window.localStorage.setItem(
        "ordersData",
        JSON.stringify(this.ordersData)
      );
      window.localStorage.setItem("goodsData", JSON.stringify(goodsData));
      this.$router.push("/orders");
    },
    setTimeOrders() {
      let nowTime = this.gteNowDate(0);
      let removNowTime = +new Date();

      let goodsData = JSON.parse(window.localStorage.getItem("goodsData"));
      let index = goodsData.findIndex(
        (item) => item.id == this.goodsData[0].id
      );

      let ordersData = goodsData.splice(index, 1);
      let newordersData = {
        ...ordersData[0],
        removTime: removNowTime + 7200000,
        time: nowTime,
        received: false,
        pay: false,
        address: this.address,
      };
      if (JSON.parse(localStorage.getItem("ordersData"))) {
        console.log(JSON.parse(localStorage.getItem("ordersData")));
        this.ordersData = JSON.parse(localStorage.getItem("ordersData"));
      }

      this.ordersData.unshift(newordersData);

      window.localStorage.setItem(
        "ordersData",
        JSON.stringify(this.ordersData)
      );
      window.localStorage.setItem("goodsData", JSON.stringify(goodsData));
      this.$router.push("/orders");
    },
    //获取当前时间
    gteNowDate(t) {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      let hour = date.getHours() + t; //时
      let minutes = date.getMinutes(); //分
      let seconds = date.getSeconds(); //秒

      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
  created() {
    this.gteGoodsData();
    this.getAddress();
  },
};
</script>

<style lang="scss" scoped>
.order_settlement {
  background-color: #f3f3f3;
  .head {
    position: sticky;
    top: 0;
    left: 0;
    .head_title {
      height: 50px;
      border-bottom: 1px solid #dcdcdc;
      position: relative;
      text-align: center;
      line-height: 49px;
      background-color: #fff;
      font-size: 19px;
      span {
        padding-left: 10px;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 50px;
        text-align: center;
        font-size: 28px;
        height: 50px;
      }
    }
    .head_address {
      padding: 6px 14px;
      background: url("../../public/images/img/colourBar.jpg") left bottom
        repeat-x #fff;
        position: relative;
      background-size: auto 2px;
      .p_item {
        font-size: 16px;
        height: 29px;
        color: #323232;
        line-height: 29px;
        display: flex;
        .name {
          padding-left: 15px;
        }
        .call {
          padding-left: 30px;
        }
      }
      .p_addr {
        height: 22px;
        color: #323232;
        font-size: 13px;
      }
      .addre {
        position: absolute;
        font-size: 18px;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .page_scroll {
    .shop_title {
      margin-top: 8px;
      padding-left: 18px;
      display: flex;
      font-size: 14px;
      background-color: #fff;
      color: #323232;
      height: 34px;
      align-items: center;
      .iconfont {
        font-size: 18px;
        color: #edd388;
        margin-right: 10px;
        border: 1px solid #edd388;
        border-radius: 50%;
      }
    }
    .product {
      padding: 10px 37.5px 10px 14px;
      background-color: #fafafa;

      display: flex;
      border-bottom: 1px solid #dddddd;
      justify-content: space-between;
      .img {
        width: 50px;
        height: 50px;
        img {
          width: 100%;
          display: block;
        }
      }
      .fl_r {
        .line_2 {
          height: 25px;
          line-height: 25px;
          text-align: right;
          font-size: 13px;
        }
        .line_2.red {
          color: #ff2832;
          font-size: 16px;
        }
        .iconfont {
          position: absolute;
          font-size: 12px;
          right: 15px;

          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .single_line {
      padding: 10px 37.5px 10px 14px;
      background-color: #fff;
      display: flex;
      border-bottom: 1px solid #dddddd;
      justify-content: space-between;
      font-size: 14px;
      position: relative;
      .price {
        color: #ff2832;
      }
      .iconfont {
        position: absolute;
        font-size: 12px;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .single_line.mt_n {
      margin-top: 8px;
    }
  }
  ._float_sub {
    width: 100%;
    background-color: #fff;
    height: 51px;
    position: fixed;
    border-top: 8px solid #f3f3f3;
    display: flex;
    line-height: 51px;
    justify-content: flex-end;
    .price_sum {
      font-size: 16px;
      margin-right: 30px;
      span {
        color: #ff2832;
      }
    }
    .sub_btn {
      width: 100px;
      height: 51px;
      line-height: 51px;
      text-align: center;
      color: #fff;
      background-color: #f9524f;
    }
  }
}
</style>